<template>
	<div class="padding-across-10" v-loading="loading" element-loading-text="拼命加载中">
		<div style="width: 100%;display: flex">
			<headerOpreate :opreate-datas="opreateDatas" v-on:executeAction="executeAction"></headerOpreate>
		</div>
		<div style="width: 100%;padding-top: 3px">
			<div style="float: left margin-bottom:10px;margin-top:10px">
				<!-- 输入设备 -->
				<span style="font-size: 13px;font-weight: bold">用户名</span>
				<el-input size="small" style="width: 200px;" class="inline-input" v-model="inputQuid" placeholder="请输入用户名">
				</el-input>
				<span style="font-size: 13px;font-weight: bold">设备名</span>
				<el-input size="small" style="width: 200px;" class="inline-input" v-model="inputDevice" placeholder="请输入设备名">
					<!-- <el-button slot="append" icon="search" @click="reloadDatas()"></el-button> -->
				</el-input>
				<template >
					<span style="font-size: 13px;font-weight: bold">{{$t('message.start')}}</span>
					<el-date-picker :editable="false" v-model="startTime" :clearable="false" size="small" type="date" placeholder="选择起始日期" @change="changeStartTime"></el-date-picker>
					<span style="font-size: 13px;font-weight: bold">{{$t('message.end')}}</span>
					<el-date-picker :editable="false" v-model="endTime" :clearable="false" size="small" type="date" placeholder="选择结束日期" @change="changeEndTime"></el-date-picker>
				</template>
			</div>
		
		</div>
		<div style="width: 100%;margin-top:10px">
			<el-table border style="width: 100%;" :data="tableData" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55"></el-table-column>
			
				<el-table-column :show-overflow-tooltip="true" label="昵称" align="center" prop="nickName"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="用户名" align="center" prop="uid"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="设备名" align="center" prop="device"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="设备码" align="center" prop="deviceSn"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="登录时间" align="center" prop="loginTime"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="登出时间" align="center" prop="logoutTime"></el-table-column>
				<el-table-column  :show-overflow-tooltip="true" label="使用时长 (分钟)" align="center" prop="duration"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="登录次数" align="center" prop="loginCount"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="使用总时长(分钟)" align="center" prop="loginTotalTime"></el-table-column>

			</el-table>
			<div class="block" style="text-align:right;margin-bottom:100px">
				<el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" :current-page="currentPage" :page-size="pageSize" :page-sizes="[10,20,30,40,50]" layout="total,sizes, prev, pager, next, jumper" :total="totalSize">
				</el-pagination>
			</div>
		</div>
	</div>
</template>
<script>
	import $ from 'jquery'
	import {
		GloabFun,
		HttpServer
	} from '../../../../assets/js/common.js'
	import headerOpreate from '../../../../components/headerOpreate'
	var date = new Date();
	export default {
		components: {
			headerOpreate
		},
		data() {
			Date.prototype.format = function(format) {
				var date = {
					"M+": this.getMonth() + 1,
					"d+": this.getDate()
				};
				if (/(y+)/i.test(format)) {
					format = format.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
				}
				for (var k in date) {
					if (new RegExp("(" + k + ")").test(format)) {
						format = format.replace(RegExp.$1, RegExp.$1.length == 1 ?
							date[k] : ("00" + date[k]).substr(("" + date[k]).length));
					}
				}
				return format;
			}
			return {
				//输入设备名
				inputQuid:'',
				inputDevice:'',
				Token:" ",
				UserKeyId:'',
				UserLoginName:" ",
				startTime: new Date((date.getTime() - 3600 * 1000 * 24 * 30)).format('yyyy-MM-dd') + ' 00:00:00',
				endTime: date.format('yyyy-MM-dd') + ' 23:59:59',
				loading: false,
				isReload: false,
				tableData: [],
				multipleSelection: [],
				currentPage: 1,
				pageSize: 10,
				totalSize: 0,
				opreateDatas: [{
						show: true,
						size: "small",
						type: 'primary',
						icon: 'el-icon-eleg-icon_refresh el-icon--left',
						name: '刷新',
						action: 'reloadDatas'
					},
					{
						show: true,
						size: "small",
						type: 'primary',
						icon: 'el-icon-upload2 el-icon--left',
						name: '导出表格',
						action: 'exportExcel'
					},
					{
						show: true,
						size: "small",
						type: 'primary',
						icon: 'el-icon-search el-icon--left',
						name: '搜索',
						action: 'getDatas'
					}
				],
				category: "MultimediaIT",
				MonthOrDay: 'month',
				selectedDate: new Date(),
				Year: "",
				Month: "",
				Day: "",
				Order: 2,
				Qdevice:'',
				Quid:'',

			}
		},
		props: {
			templateObj: {
				type: Object,
				default: function() {
					return {};
				}
			}
		},
		methods: {
			handleSelectionChange(val) {
				this.multipleSelection = val;
				console.log(this.multipleSelection);
				
			},
			// 	//导出表格
			// exportExcel() {　　　　　　
			// 	require.ensure([], () => {　　　　　　　　
			// 		const {
			// 			export_json_to_excel
			// 		} = require('../../../../assets/js/vendor/Export2Excel.js');
			// 		const tHeader = ['昵称', '用户号', '设备名', '设备码', '登录时间', '登出时间', '使用时长', '登录次数','使用总时长'];　　　　　　　　
			// 		const filterVal = ['nickName', 'uid', 'device', 'deviceSn', 'loginTime',
			// 		'logoutTime', 'useTime', 'loginCount','loginTotalTime'
			// 		];　　　　　　　　
			// 		const list = this.tableData;　　　　　　　　
			// 		const data = this.formatJson(filterVal, list);　　　　　　　
			// 		export_json_to_excel(tHeader, data, '智慧校园用户使用时长统计');　　　　　　
			// 	})　　　
			// },
			// formatJson(filterVal, jsonData) {　　　　　　
			// 	return jsonData.map(v => filterVal.map(j => v[j]))　　
			// },
			
			//导出表格
			exportExcel(row) {
				 this.$confirm(/* '导出表格，是否继续?'*/ '导出表格，是否继续?', /* '提示'*/ '提示', {
            confirmButtonText: /* '确定'*/ '确定',
            cancelButtonText: /* '取消'*/ '取消',
            type: 'warning'
          }).then(() => {
				HttpServer.httpGet2.call(this,`/Api/Statistics/ClassDurationExport?&qdevice=${this.Qdevice||''}&quid=${this.Quid||''}&beginDate=${this.startTime}&endDate=${this.endTime}`,
					response => {}, response => {
						GloabFun.downLoadFile('智慧校园用户使用时长统计','xlsx', response.data)
					})
		  }).catch(() => {
            this.$notify.info({
              title: /* '消息'*/ this.$t('message.message'),
              message: this.$t('message.cancleOperation'),
              duration: 1500
            })
          })
			},
			changeCategory() {
				this.initMonth(this.selectedDate);
				this.getDatas();
			},
			initDate() {
				let formateDate = this.selectedDate.format("yyyy-MM-dd");
				let array = formateDate.split('-')
				this.Year = array[0];
				this.Month = array[1];
				this.Day = array[2];
				this.getDatas();
			},
			initMonth() {
				let formateDate = this.selectedDate.format("yyyy-MM-dd");
				let array = formateDate.split('-')
				this.Year = array[0];
				this.Month = array[1];
				this.Day = null;
				this.getDatas();
			},
			executeAction(action) {
				if (action) {
					this[action]();
				}
			},
			//保留小数点后两位
			toDecimal(array) {
				for (var i = 0; i < array.length; i++) {
					var f = parseFloat(array[i].consumption);
					if (isNaN(f)) {
						return;
					}
					f = Math.round(array[i].consumption * 100) / 100;
					array[i].consumption = f;
				}
				return array;
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.getDatas();
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.getDatas();
			},
			changeStartTime(val) {
				this.startTime = val + ' 00:00:00';
				this.getDatas();
			},
			changeEndTime(val) {
				this.endTime = val + ' 23:59:59';
				this.getDatas();
			},
			reloadDatas() {
				this.inputQuid='',
				this.inputDevice='',
				HttpServer.httpPost.call(this, '/Api/Statistics/ClassDuration', {
					beginDate: this.startTime,
					endDate: this.endTime,
					index: this.currentPage,
					pagesize: this.pageSize,
					qdevice:'',
					UserId: parseInt(GloabFun.getKeyId()),
					quid:''
				}, function(response) {}, function(response) {
					if (response.data.code === 0) {
						this.tableData = response.data.info;
						this.totalSize = response.data.total;
						this.Qdevice = response.data.info[0].device
						this.Quid = response.data.info[0].uid				
						this.$notify({
							title: '成功',
							message: this.$t('message.refreshSuccess'),
							type: 'success',
							duration: 2500
						});
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				})
			},
			getDatas() {
				HttpServer.httpPost.call(this, '/Api/Statistics/ClassDuration', {
					beginDate: this.startTime,
					endDate: this.endTime,
					qdevice:this.inputDevice,
					quid:this.inputQuid,
					UserId: parseInt(GloabFun.getKeyId()),
				}, function(response) {}, function(response) {
					if (response.data.code === 0) {
						this.tableData = response.data.info;
						this.totalSize = response.data.total;
						// this.tableData.map(item => {})
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				})
			}
		},
		computed: {},
		created() {
			this.inputQuid='',
			this.inputDevice='',
			this.getDatas()
		}
	}
</script>
<style scoped lang="less">
	.name {
		color: #20a0ff;
	}
	.el-date-editor.el-input {
		width: 130px;
	}
	.edit-mission {
		padding-top: 50px;
		.el-dialog__header {
			background-color: #000;
		}
		.el-dialog__body {
			position: relative;
		}
		.clearfloat {
			height: 100px;
			max-height: 150px;
		}
	}
</style>